<template>
  <div class="box">
    <h1>app</h1>

    <!-- icon图标自动引入 -->
    <el-button type="primary">
      <i-ep-search></i-ep-search>
      <span>search</span>
    </el-button>
    <el-button type="primary">
      <i-ep-edit></i-ep-edit>
      <span>edit</span>
    </el-button>

    <el-button :icon="Search" circle />
    <el-button type="primary" :icon="Edit" circle />
    <el-button type="success" :icon="Check" circle />
    <el-button type="info" :icon="Message" circle />
    <el-button type="warning" :icon="Star" circle />
    <el-button type="danger" :icon="Delete" circle />

    <div class="demo-pagination-block">
      <el-pagination
        v-model:current-page="currentPage4"
        v-model:page-size="pageSize4"
        :page-sizes="[100, 200, 300, 400]"
        :small="small"
        :disabled="disabled"
        :background="background"
        layout="total, sizes, prev, pager, next, jumper"
        :total="400"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>
  </div>
</template>

<script lang="ts">
// icon图标手动引入
import {
  Check,
  Delete,
  Edit,
  Message,
  Search,
  Star,
} from "@element-plus/icons-vue";
import { ref } from "vue";
export default {
  name: "App",
  setup() {
    const currentPage4 = ref(4);
    const pageSize4 = ref(100);
    const small = ref(false);
    const background = ref(false);
    const disabled = ref(false);

    const handleSizeChange = (val: number): void => {
      console.log(`${val} items per page`);
    };
    const handleCurrentChange = (val: number): void => {
      console.log(`current page: ${val}`);
    };
    const fly = () => {
      console.log("i can fly");
    };
    return {
      fly,
      currentPage4,
      pageSize4,
      small,
      background,
      disabled,
      handleSizeChange,
      handleCurrentChange,
      Check,
      Delete,
      Edit,
      Message,
      Search,
      Star,
    };
  },
};
</script>

<style lang="scss" scoped>
.box {
  width: 100vw;
  background-color: skyblue;
  .demo-pagination-block + .demo-pagination-block {
    margin-top: 10px;
  }
  .demo-pagination-block .demonstration {
    margin-bottom: 16px;
  }
}
</style>
